<template>
    <div>
        <el-container>

            <el-main>
                <div class="note" :style ="note" style="height:940px">
                    <el-row >
                        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
                    </el-row>
                    <el-row >
                        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple p">加勒比海盗</div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
                    </el-row>
                    <el-row >
                        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
                    </el-row>
                    <el-row >
                        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple p">七个小矮人矿车</div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple-light p">探秘海妖复仇湾</div></el-col>
                    </el-row>
                    <el-row >
                        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
                    </el-row>
                    <el-row >
                        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
                    </el-row>
                    <el-row >
                        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
                    </el-row>
                    <el-row >
                        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
                    </el-row>
                    <el-row >
                        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
                    </el-row>
                    <el-row >
                        <el-col :span="4"><div class="grid-content bg-purple p">抱抱龙冲天赛车</div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
                    </el-row>
                    <el-row >
                        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple p">漫游童话时光</div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
                    </el-row>
                    <el-row >
                        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple-light p">飞跃地平线</div></el-col>
                    </el-row>
                    <el-row >
                        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
                    </el-row>
                    <el-row >
                        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple-light p">雷鸣山漂流</div></el-col>
                    </el-row>
                    <el-row >
                        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
                    </el-row>
                    <el-row >
                        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
                    </el-row>
                    <el-row >
                        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple p">漫威英雄总部</div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
                    </el-row>
                    <el-row >
                        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
                    </el-row>
                    <el-row >
                        <el-col :span="4"><div class="grid-content bg-purple p">创极速光轮</div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple-light p">巴斯光年星际营救</div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
                    </el-row>
                </div>
            </el-main>

            <el-aside width="400px">
              <br>
              <span>请选择起点</span>
              <br>
              <el-radio-group v-model="radio">
                <el-row :gutter="20">
                  <el-col :span="12"><div class="grid-content bg-purple" style="text-align: left"><el-radio :label="0">抱抱龙冲天赛车</el-radio></div></el-col>
                  <el-col :span="12"><div class="grid-content bg-purple" style="text-align: left"><el-radio :label="1">七个小矮人矿车</el-radio></div></el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12"><div class="grid-content bg-purple" style="text-align: left"><el-radio :label="2">加勒比海盗</el-radio></div></el-col>
                  <el-col :span="12"><div class="grid-content bg-purple" style="text-align: left"><el-radio :label="3">创极速光轮</el-radio></div></el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12"><div class="grid-content bg-purple" style="text-align: left"><el-radio :label="4">漫游童话时光</el-radio></div></el-col>
                  <el-col :span="12"><div class="grid-content bg-purple" style="text-align: left"><el-radio :label="5">探秘海妖复仇湾</el-radio></div></el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12"><div class="grid-content bg-purple" style="text-align: left"><el-radio :label="6">巴斯光年星际营救</el-radio></div></el-col>
                  <el-col :span="12"><div class="grid-content bg-purple" style="text-align: left"><el-radio :label="7">漫威英雄总部</el-radio></div></el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12"><div class="grid-content bg-purple" style="text-align: left"><el-radio :label="8">雷鸣山漂流</el-radio></div></el-col>
                  <el-col :span="12"><div class="grid-content bg-purple" style="text-align: left"><el-radio :label="9">飞跃地平线</el-radio></div></el-col>
                </el-row>
              </el-radio-group>
              <br>
              <span>请选择终点</span>
              <br>
              <el-radio-group v-model="radio1">
                <el-row :gutter="20">
                  <el-col :span="12"><div class="grid-content bg-purple" style="text-align: left;"><el-radio :label="0">抱抱龙冲天赛车</el-radio></div></el-col>
                  <el-col :span="12"><div class="grid-content bg-purple" style="text-align: left"><el-radio :label="1">七个小矮人矿车</el-radio></div></el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12"><div class="grid-content bg-purple" style="text-align: left"><el-radio :label="2">加勒比海盗</el-radio></div></el-col>
                  <el-col :span="12"><div class="grid-content bg-purple" style="text-align: left"><el-radio :label="3">创极速光轮</el-radio></div></el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12"><div class="grid-content bg-purple" style="text-align: left"><el-radio :label="4">漫游童话时光</el-radio></div></el-col>
                  <el-col :span="12"><div class="grid-content bg-purple" style="text-align: left"><el-radio :label="5">探秘海妖复仇湾</el-radio></div></el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12"><div class="grid-content bg-purple" style="text-align: left"><el-radio :label="6">巴斯光年星际营救</el-radio></div></el-col>
                  <el-col :span="12"><div class="grid-content bg-purple" style="text-align: left"><el-radio :label="7">漫威英雄总部</el-radio></div></el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12"><div class="grid-content bg-purple" style="text-align: left"><el-radio :label="8">雷鸣山漂流</el-radio></div></el-col>
                  <el-col :span="12"><div class="grid-content bg-purple" style="text-align: left"><el-radio :label="9">飞跃地平线</el-radio></div></el-col>
                </el-row>
              </el-radio-group>

              <el-row>
                <el-button type="primary" round @click="getPath()">查询路径</el-button>
                  <el-button type="success" round @click="toSpot()">查看终点详情</el-button>
              </el-row>
              <br>
              <span>最短路径</span>
              <ul>
                <li v-for="(p,index) in pathList" :key="index" >
                  {{p}}
                </li>
              </ul>
            </el-aside>
        </el-container>

    </div>
</template>

<script>
    import pathApi from '@/api/path.js'
    export default {
        name: "road",
        data() {
            return{
              note: {
                  backgroundImage: "url(" + require("@/assets/map/map.png") + ")",

                  backgroundRepeat: "no-repe,at",
                  backgroundSize: "cover",
                  marginTop: "5px",
                  marginLeft:"50px",
              },
              radio: null,
              radio1: null,
              pathList: [],

            }
        },
        methods: {
          getPath() {
            pathApi.getPath(this.radio+""+this.radio1)
            .then(response => {
              this.pathList = response.data.data.pathList;
            })
          },
            toSpot(){
              if (this.radio1===0){
                  this.$router.push("/about/" + 4)
              }else if (this.radio1===1){
                  this.$router.push("/about/" + 11)
              }else if (this.radio1==2){
                  this.$router.push("/about/" + 2)
              }else if (this.radio1==3){
                  this.$router.push("/about/" + 15)
              }else if (this.radio1==4){
                  this.$router.push("/about/" + 10)
              }else if (this.radio1==5){
                  this.$router.push("/about/" + 3)
              }else if (this.radio1==6){
                  this.$router.push("/about/" + 14)
              }else if (this.radio1==7){
                  this.$router.push("/about/" + 10)
              }else if (this.radio1==8){
                  this.$router.push("/about/" + 24)
              }else if (this.radio1==9){
                  this.$router.push("/about/" + 22)
              }
            }

        }
    }
</script>

<style scoped>
    .el-aside {
        /*background-color: #D3DCE6;*/
        color: #333;
        text-align: center;
       height: 990px;
    }

    .el-main {

        color: #333;
        text-align: center;
       height: 990px;
    }

    .el-row {


    }
    .el-col {

    }
    .bg-purple-dark {

    }
    .bg-purple {

    }
    .bg-purple-light {

    }
    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }
    .main {
      border: 1px solid #f99;
      margin-top: 80px;
      display: flex;
      justify-content: space-between;
      width: 600px;
      height: 300px;
    }
    .box1{
      border: 1px solid #000;
      width: 45%;
    }
    .box2 {
      width: 45%;
      border: 1px solid #000;
    }
    li {
      height: 30px;
      padding: 5px 10px;
      margin-bottom: 2px;
      font-size: 20px;
      color: #42b983;
    }
    .del{
      border: 1px solid #fff;
      float: right;
      font-size: 20px;
    }
    .p{
      -webkit-text-stroke: 1.0px #000;
      text-stroke: 1.0px #000;
      color:white;
      font-size:28px;
      font-weight:bold;
    }
    span{
      color: #42b983;
      font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,微软雅黑,Arial,sans-serif;
      font-size: 30px;
    }
</style>
